<template>
  <div class="page">
    <div class="row">
      <div class="row1">
        <div class="imgs">
          <img src="/static/imgs_s08/s08_goods01.png" alt />
        </div>
        <div class="txt">
          <p class="food-name">麻辣卷</p>
          <p class="cost-price">￥12.00</p>
          <div>
            <span class="now-price">￥10.00</span>
            <span class="tuan">2人团</span>
          </div>
        </div>
      </div>
      <div class="row2">
        <div class="imgs">
          <img src="/static/imgs_s08/s08_goods02.png" alt />
        </div>
        <div class="txt">
          <p class="food-name">黑椒牛排</p>
          <p class="cost-price">￥79.00</p>
          <div>
            <span class="now-price">￥69.00</span>
            <span class="tuan">2人团</span>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="row1">
        <div class="imgs">
          <img src="/static/imgs_s08/s08_goods03.png" alt />
        </div>
        <div class="txt">
          <p class="food-name">长沙臭豆腐</p>
          <p class="cost-price">￥9.00</p>
          <div>
            <span class="now-price">￥8.00</span>
            <span class="tuan">2人团</span>
          </div>
        </div>
      </div>
      <div class="row2">
        <div class="imgs">
          <img src="/static/imgs_s08/s08_goods04.png" alt />
        </div>
        <div class="txt">
          <p class="food-name">串串香</p>
          <p class="cost-price">￥39.00</p>
          <div>
            <span class="now-price">￥9.00</span>
            <span class="tuan">2人团</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row row3">
      <div class="row1">
        <div class="imgs">
          <img src="/static/imgs_s08/s08_goods05.png" alt />
        </div>
        <div class="txt txt1">
          <p class="food-name">糖醋里脊</p>
        </div>
      </div>
      <div class="row2">
        <div class="imgs">
          <img src="/static/imgs_s08/s08_goods06.png" alt />
        </div>
        <div class="txt txt1">
          <p class="food-name">麻婆豆腐</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
.page {
  width: 100%;
  background-color: #f0f2f5;
  font-family: "Source Han Sans CN";
}

.row {
  height: 220px;
  display: flex;
  justify-content: space-around;
}

.row .row1 {
  width: 166px;
  height: 202px;
}

.row .imgs img {
  width: 166px;
  height: 136px;
  margin-top: 13px;
}

.row .txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 66px;
  background-color: #fff;
  border-radius: 0 0 9px 9px;
  box-sizing: border-box;
  padding-left: 9px;
}

.txt .food-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.txt .cost-price {
  font-size: 7px;
  font-weight: 400;
  text-decoration: line-through;
  color: rgba(163, 165, 168, 1);
}

.txt .now-price {
  display: inline-block;
  width: 43px;
  height: 11px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(246, 83, 88, 1);
}

.txt .tuan {
  display: inline-block;
  width: 33px;
  height: 15px;
  margin-left: 70px;
  background: rgba(50, 177, 108, 1);
  border: 0px solid rgba(0, 192, 137, 1);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 15px;
}

.row .txt1 {
  height: 25px;
  border-radius: 0;
}

.page .row3 {
  height: 177px;
}
</style>
